<template>
  <div>
    <div style="height:70px"></div>
    <div align="left" style="text-align:center">
      <!-- 座位表 -->
      <div style="width:50%;height:100%;">
        <div v-if="hallList&&hallList[0]">
          <!-- 生成座位表 -->
          <div style="width:1000px;height:100%;background-color: aqua;">
          <div style="float: left;width:25%;text-align:right;font-size:25px;color: #2d63b4;"><br></div>
          <div v-for="index1 in hallList[0].column_num" :key="index1" style="float: left">
            <div v-for="index2 in hallList[0].row_num" :key="index2" style="clear:left">
              <div class="s1" style="width: 80px;">
                <a-button
                  type="link"
                  :style="btnType[index2][index1]"
                  size="small"
                  @click="seatpoint(index2, index1)"
                  :disabled="arr&&arr[index2][index1]"
                >{{index2}}-{{index1}}</a-button>
              </div>
            </div>
          </div>
          </div>
          <!-- 生成座位表 -->
        </div>
      </div>
      <!-- 座位表 -->
      <div style="float: left;width:50px;text-align:right;font-size:25px;color: #2d63b4;"><br></div>
      <!-- 电影 -->
      <div style="width:auto;float:left;font-size:16px;margain-left: 10px; background-color:rgba(95, 95, 95, 0.102);" align="left">
        <div style="width:10px;float:left;height: 150px"><br></div>
        <div style="width:300px;">
          <div style="width:118px;float:left">
            <div>
              <img :src="movie.mov_img_path" style="height:160px;border:5px solid white;" />
            </div>
          </div>
          <div style="width:10px;float:left;height: 150px"><br></div>
          <div >
            <div style="font-size: 20px;font-weight: 700;color: #333;margin: 0 0 14px;">{{movie.mov_name}}</div>
            <div style="font-size: 12px;color: #999;height:20px;">类型：<span style="color: #333;">{{movie.mov_label}}</span></div>
            <div style="font-size: 12px;color: #999;">时长：<span style="color: #333;">{{movie.mov_time}}</span></div>
            
          </div>
        </div>
        <div style="width:10px;float:left;height: 100px"><br></div>
        <div style="clear:left">
          <div style="width:25px;float:left;height: 100px"><br></div>
          影院：{{cinema.cnm_name}}({{cinema.cnm_address}})
          <br />
          影厅：{{cnm_hall_id}}号厅
          <br />
          场次：{{screen_time}}
          <br />
          票价：￥{{price}}/张
          <br />座位：一次最多选5个座位
          <div>
            <div v-for="item in tempList" :key="item.seat_column">
              已选：{{item.seat_row}}-{{item.seat_column}} &nbsp;
              <a-button
                type="primary"
                size="small"
                @click="removeSeat(item.seat_row, item.seat_column)"
              >退选</a-button>
            </div>
            <div style="clear: left;text-align:center;margin-top:15px;margin-bottom:10px;">
              <a-button type="primary" @click="submitOrder">确认购票</a-button>
            </div>
          </div>
        </div>
      </div>
      <!-- 电影 -->
      <!-- 弹窗 -->
      <div>
        <a-modal v-model:visible="visible" title="购票成功！可以去看电影啦~" @ok="success">
          <template #footer>
            <a-button key="submit" type="primary" @click="success">确认</a-button>
          </template>
          <div>
            <div>
              {{movie.mov_name}}&nbsp;{{screen_time}}&nbsp;{{price}}元/张
              <br />
              <span>已选座位：</span>
            </div>
            <div
              v-for="item in ticketNumList"
              :key="item.tick_num"
              style="float:left"
            >{{item.seat_row}}排{{item.seat_column}}座&nbsp;</div>
          </div>
        </a-modal>
      </div>
      <!-- 弹窗 -->
    </div>
  </div>
</template>

<script setup>
import { Modal } from "ant-design-vue";
import { ref, defineComponent, h } from "vue";
import { useRouter, useRoute } from "vue-router";

import { get, post, tip } from "@/common";

const router = useRouter();
const route = useRoute();

const hallList = ref([]);

let mov_id;
let cnm_id;
let cnm_hall_id;
let price;
let screen_time;
const movieList = ref([]);
const movie = ref({});
const user = ref({});
const cinemaList = ref([]);
const cinema = ref({});
const selectedList = ref({});
let t1;
let len = 0;
let username;
const btnType = ref([]);

function Ticket(row, column) {
  this.cust_username = username;
  this.mov_id = mov_id;
  this.cnm_id = cnm_id;
  this.mov_name = movie.value.mov_name;
  this.cnm_hall_id = cnm_hall_id;
  this.price = price;
  this.seat_row = row;
  this.seat_column = column;
  this.screen_time = screen_time;

  this.order_time = "";
}

const get_id = () => {
  mov_id = route.query.mov_id;
  cnm_id = route.query.cnm_id;
  cnm_hall_id = route.query.cnm_hall_id;
  price = route.query.price;
  screen_time = route.query.screen_time;
};

const arr = ref([]);
const isShow = ref(false);
get_id();

const getSelectedSeats = () => {
  get("/user/ticket/selected", {
    cnm_hall_id: cnm_hall_id,
    cnm_id: cnm_id,
    screen_time: screen_time
  }).then(res => {
    selectedList.value = res.data;
    console.log(selectedList);
    var i = 0;
    for (; i < selectedList.value.length; i++) {
      arr.value[selectedList.value[i].seat_row][
        selectedList.value[i].seat_column
      ] = true;
    }
    console.log(arr);
    isShow.value = true;
  });
};

const getHall = () => {
  get("/info/hall/hall-list-byid", { id1: cnm_hall_id, id2: cnm_id }).then(
    res => {
      hallList.value = res.data;
      arr.value = new Array(hallList.value[0].row_num + 1)
        .fill(false)
        .map(v => new Array(hallList.value[0].column_num + 1).fill(false));
      btnType.value = new Array(hallList.value[0].row_num + 1)
        .fill("border:1px solid;min-width:55px")
        .map(v =>
          new Array(hallList.value[0].column_num + 1).fill(
            "border:1px solid;min-width:55px"
          )
        );
      getSelectedSeats();
    }
  );
};

getHall();

const getMoviesById = () => {
  get("/info/movie/moviebyid", { id: mov_id }).then(res => {
    movieList.value = res.data;
    movie.value = movieList.value[0];
  });
};

getMoviesById();

const getCinemaById = () => {
  get("/info/cinema/cinema-list-byid", { cnm_id: cnm_id }).then(res => {
    cinemaList.value = res.data;
    cinema.value = cinemaList.value[0];
  });
};

getCinemaById();

const getCurrentUser = () => {
  get("/user/info").then(res => {
    user.value = res.data;
    username = user.value.cust_username;
  });
};

getCurrentUser();

const postTempTicket = temp => {
  post("/user/ticket/add-temp", temp).then(res => {
    user.value = res.data;
    getTempTicket();
  });
};

const ticketList = new Array();
const tempList = ref([]);

const getTempTicket = () => {
  get("/user/ticket/get-temp").then(res => {
    tempList.value = res.data;
    len = tempList.value.length;
  });
};

const seatpoint = (row, column) => {
  let temp = new Ticket(row, column);
  if (btnType.value[row][column] == "border:1px solid;min-width:55px") {
    if (ticketList.length == 5) {
      tip.error("一次最多只能选择5个座位！");
    } else {
      btnType.value[row][column] =
        "background: red;border:1px solid;min-width:55px";
      ticketList.push(temp);
      tip.success("成功选座：" + row + "排" + column + "座");
    }
  } else {
    btnType.value[row][column] = "border:1px solid;min-width:55px";
    for (var i = 0; i < ticketList.length; i++) {
      if (
        ticketList[i].seat_row == row &&
        ticketList[i].seat_column == column
      ) {
        ticketList.splice(i, 1);
      }
    }
  }
};

const visible = ref(false);
const openSuccessWin = () => {
  visible.value = true;
};

const ticketNumList = ref({});

const submitOrder = () => {
  if (ticketList.length == 0) {
    tip.error("你还没有选择任何座位！");
  } else {
    var now = new Date();
    let year = now.getFullYear();
    let month = now.getMonth() + 1;
    let date = now.getDate();
    let hour = now.getHours(); //得到小时
    let minu = now.getMinutes(); //得到分钟
    let sec = now.getSeconds(); //得到秒

    let time =
      year + "-" + month + "-" + date + " " + hour + ":" + minu + ":" + sec;
    for (var i = 0; i < ticketList.length; i++) {
      ticketList[i].order_time = time;
    }
    post("/user/order/submit_order", ticketList).then(res => {
      ticketNumList.value = res.data;
      openSuccessWin();
    });
  }
};

const deleteAllTemp = () => {
  get("/user/ticket/delete-all-temp").then(res => {
    getTempTicket();
  });
};

const toIndex = () => {
  router.push({ path: "/home/index" });
};

const success = () => {
  visible.value = false;
  toIndex();
};
</script>

<style scoped>
@import "../css/cinema.css";
@import "../css/style-starter.css";
@import "../css/base.css";
@import "../css/bootstrap-grid.css";

.s1 {
  width: 58px;
  height: 29px;
}
.s2 {
  background: rosybrown;
  border: 1px solid;
  width: 58px;
  height: 58px;
}
</style>